<template>
  <div>
    <el-alert title="数据下载" type="info" :closable="false"></el-alert>
    <div class="content">
      <h1>ES数据下载</h1>
      <el-form :model="form" label-position="left" label-width="150px">
        <el-form-item label="监测体">
          <el-select
            placeholder="请选择监测体"
            v-model="form.monitorId"
            clearable
            @change="monitorChange"
          >
            <el-option
              v-for="(item, index) in monitorList"
              :key="index"
              :label="item.monitorName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="传感器类型">
          <el-select
            placeholder="请选择传感器类型"
            v-model="form.moduleEnum"
            clearable
            @change="moduleEnumChange"
          >
            <el-option label="北斗" value="00"></el-option>
            <el-option label="岩土" value="01"></el-option>
            <el-option label="气象" value="02"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="传感器">
          <el-select
            placeholder="请选择传感器"
            v-model="form.sensorNumber"
            clearable
            @change="sensorChange"
          >
            <el-option
              v-for="(item, index) in sensorList"
              :key="index"
              :label="item.sensorName"
              :value="item.sensorNumber"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" v-show="form.moduleEnum != ''">
          <el-date-picker
            placeholder="请输入开始时间"
            v-model="form.startTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="结束时间"
          v-show="form.moduleEnum == '01' || form.moduleEnum == '02'"
        >
          <el-date-picker
            placeholder="请输入结束时间"
            v-model="form.endTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="整点" v-show="form.moduleEnum == '00'">
          <el-select placeholder="请选择整点" v-model="form.hour" clearable>
            <el-option label="0" :value="0"></el-option>
            <el-option label="1" :value="1"></el-option>
            <el-option label="2" :value="2"></el-option>
            <el-option label="3" :value="3"></el-option>
            <el-option label="4" :value="4"></el-option>
            <el-option label="5" :value="5"></el-option>
            <el-option label="6" :value="6"></el-option>
            <el-option label="7" :value="7"></el-option>
            <el-option label="8" :value="8"></el-option>
            <el-option label="9" :value="9"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="11" :value="11"></el-option>
            <el-option label="12" :value="12"></el-option>
            <el-option label="13" :value="13"></el-option>
            <el-option label="14" :value="14"></el-option>
            <el-option label="15" :value="15"></el-option>
            <el-option label="16" :value="16"></el-option>
            <el-option label="17" :value="17"></el-option>
            <el-option label="18" :value="18"></el-option>
            <el-option label="19" :value="19"></el-option>
            <el-option label="20" :value="20"></el-option>
            <el-option label="21" :value="21"></el-option>
            <el-option label="22" :value="22"></el-option>
            <el-option label="23" :value="23"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="downlod">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "DataDownload",
  data() {
    return {
      monitorList: null,
      sensorList: null,
      form: {
        monitorId: "",
        moduleEnum: "",
        sensorNumber: "",
        startTime: "",
        endTime: "",
        hour: "",
      },
    };
  },
  methods: {
    monitorChange(value) {
      (this.sensorList = null),
        (this.form.sensorNumber = ""),
        (this.form.startTime = ""),
        (this.form.endTime = ""),
        (this.form.hour = "");
      if (value != "" && this.form.moduleEnum != "") {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"monitorId\\":\\"${value}\\",\\"moduleEnum\\":\\"${this.form.moduleEnum}\\"}","serviceCode":"listSensorByMonitor","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.sensorList = res.data.parameter.list;
        });
      }
    },
    moduleEnumChange(value) {
      (this.sensorList = null),
        (this.form.sensorNumber = ""),
        (this.form.startTime = ""),
        (this.form.endTime = ""),
        (this.form.hour = "");
      if (value != "" && this.form.monitorId != "") {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"monitorId\\":\\"${this.form.monitorId}\\",\\"moduleEnum\\":\\"${value}\\"}","serviceCode":"listSensorByMonitor","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.sensorList = res.data.parameter.list;
        });
      }
    },
    sensorChange() {
      (this.form.startTime = ""),
        (this.form.endTime = ""),
        (this.form.hour = "");
    },
    downlod() {
      let type;
      switch (this.form.moduleEnum) {
        case "00":
          type = "exportSatelliteESData";
          break;
        case "01":
          type = "exportRockStatistics";
          break;
        case "02":
          type = "exportWeatherESData";
      }
      let startTime, endTime;
      if (!this.form.startTime) {
        startTime = "";
      } else {
        startTime = moment(this.form.startTime).format("YYYY-MM-DD");
      }
      if (!this.form.endTime) {
        endTime = "";
      } else {
        endTime = moment(this.form.endTime).format("YYYY-MM-DD");
      }
      let queryData = {
        type: type,
        startTime: startTime,
        endTime: endTime,
        sensorNumber: this.form.sensorNumber,
        hour: this.form.hour,
      };
      Axios({
        url: serviceApi.EXPORT_URL,
        method: "post",
        headers: {
          "Content-Type": "application/download;charset=UTF-8",
        },
        responseType: "blob",
        data: `parameter={"type":"${queryData.type}","parameter":{"startTime":"${queryData.startTime}","endTime":"${queryData.endTime}","sensorNumber":"${queryData.sensorNumber}","hour":"${queryData.hour}"}}`,
      }).then((res) => {
        let blob = new Blob([res.data]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        // downloadElement.download = "用户数据.xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
  },
  created() {
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{}","serviceCode":"listMonitor","timestamp":"","uuid":""}`,
    }).then((res) => {
      this.monitorList = res.data.parameter.list;
    });
  },
};
</script>

<style lang="less" scoped>
.el-alert {
  line-height: 30px;
  margin-top: 20px;
  /deep/ .el-alert__title {
    font-size: 16px;
  }
}
.content {
  width: 40%;
  h1 {
    text-align: center;
    font-size: 25px;
    font-weight: 300;
    margin: 20px 0;
  }
  .el-select {
    display: flex;
  }
}
</style>